<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="/favicon.png">

  <title>{{host}} - Mycodo {{dict_translation['login']['title']}}</title>

  <!-- Bootstrap core CSS -->
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="/static/css/signin.css" rel="stylesheet">

  <script src="/static/js/jquery-3.4.1.min.js"></script>
</head>
<body>

{% if current_user.is_authenticated %}
  <p>{{_("You're logged in already!")}}</p>
{% else %}
  <!-- Route: /login_password -->
  <div class="container">
  {% include 'flash_messages.html' %}

    <div class="row justify-content-center">
      <div class="col-12" style="max-width: 30em;">

        <h2 class="form-signin-heading" style="text-align: center">Mycodo {{dict_translation['login']['title']}}</h2>
        <h4 style="text-align: center; padding-bottom:1em">{{host}}</h4>

        <form method="post" action="/login_password">
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="inputGroupSelect01">{{_('Language')}}</label>
            </div>
            <select onchange="this.form.submit()" class="custom-select" id="inputGroupSelect01" name="language">
              {% for each_lang, each_name in languages.items() %}
                <option value="{{each_lang}}"{% if language == each_lang %} selected{% endif %}>{{each_name}}</option>
              {% endfor %}
            </select>
          </div>
        </form>

        <form id='login_form' class="form-signin" name="login" action="/login_password" method="POST">
          {{form_login.hidden_tag()}}
          {{form_login.mycodo_username.label(class_='sr-only')}}
          {{form_login.mycodo_username(class_='form-control', autofocus=true)}}
          {{form_login.mycodo_password.label(class_='sr-only')}}
          {{form_login.mycodo_password(class_='form-control')}}
          <div class="checkbox" style="padding-top: 0.5em">
            {{ form_login.remember() }} <label for="remember">{{_('Remember me') + ' (' + _('90 days') + ')'}}</label>
          </div>
          <button class="btn btn-lg btn-primary btn-block" type="submit">{{_('Log In')}}</button>
        </form>

        <div style="text-align: center;">
          <a href="/forgot_password">{{_('Forgot password?')}}</a> | <a href="/login_keypad">{{_('Keypad Login')}}</a>
        </div>

      </div>
    </div>
  </div>

{% endif %}

<!-- Bootstrap core JavaScript
================================================== -->
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>
